<!DOCTYPE html>
<html lang="ru">
    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Милые котики</title>
    <link rel="stylesheet" href="blocks/style.css">
    <script src="https://kit.fontawesome.com/40f16c6377.js" crossorigin="anonymous"></script>
    <script src="scripts/api.js"></script> 
</head>

<body>
    <!-- Заголовок -->
    <header>
        <a href="" class="logo"><i class="fa-solid fa-paw"></i> Милые котики</a>
        <a class="btn" href="" id="add"><i class="fa-regular fa-plus"></i></a>
        <a href="#" class="enter" id="login"></a>
        <a href="#" class="out">выйти</a>
    </header>
    <!-- Основная часть -->
    <main>
        <!-- Динамическое заполнение из JS -->
    </main>
    <!-- Футер -->
    <footer>
        <span>©2023 Made by Oleg</span>
        <nav>
            <a href="https://github.com/Qwaniii/scd_homework2_cats2"><i class="fa-brands fa-github"></i></a>
            <a href=""><i class="fa-brands fa-vk"></i></a>
            <a href=""><i class="fa-brands fa-telegram"></i></a>
        </nav>
    </footer>
    <!-- Форма pop up добавление котика-->
    <div class="popup-wrapper">
        <div class="popup" id="popup-form">
            <div class="popup-close btn"><i class="fa-solid fa-xmark"></i></div>
            <h2>Добавить питомца</h2>
            <form action="">
                <div class="form-img"></div>
                <input type="number" name="id" min="1" required placeholder="id">
                <input type="number" name="age" placeholder="Возраст">
                <input type="text" name="name" required placeholder="Имя">
                <input type="number" name="rate" placeholder="Рейтинг (0-10)" min="0" max="10">
                <textarea name="description" placeholder="Описание"></textarea>
                <label>Любимчик <input type="checkbox" name="favourite" placeholder=""></label>
                <input type="text" name="img_link" placeholder="Ссылка на фото">
                <button type="submit">Добавить котика</button>
            </form>
        </div>
    </div>
    <!-- форма авторизации -->
    <div class="login-wrapper">
        <div class="login" id="login-form">
            <div class="login-close btn"><i class="fa-solid fa-xmark"></i></div>
            <h2>Авторизация</h2>
            <form class="log-form" action="">
                <input class="inpLogin" type="text" name="login" requred placeholder="Логин">
                <input class="inpPass" type="password" name="pass" required placeholder="Пароль">
                <button type="submit">Войти</button>
            </form> 
        </div>
    </div>
    <!-- Окно закрыт -->
    <div class="close_window-wrapper">
        <div class="close" id="close-form">
            <div class="close-window btn"><i class="fa-solid fa-xmark"></i></div>
            <h2>Вы уверены, что хотите удалить котика?</h2>
            <form class="close-form">
                <button type="button" id="cancel">Отмена</button>
                <button type="button" id="del">Удалить</button>
            </form> 
        </div>
    </div>
    <!-- Форма информации о котике -->
    <div class="info-wrapper">
        <div class="info" id="info-form">
            <div class="info-close btn"><i class="fa-solid fa-xmark"></i></div>
            <div class="info-delete btn-del"><i class="fa-solid fa-trash"></i></div>
            <div class="info-edit btn-edit"><i class="fa-solid fa-pen"></i></div>
            <div class="info-save btn-save"><i class="fa-solid fa-floppy-disk"></i></div>
            <h2>Информация о котике</h2>
            <div class="info-form">
                <div class="info-inner info-img"></div>
                <div class="info-inner info-name forEdit"></div>
                <div class="info-inner info-id"></div>
                <div class="info-inner info-age forEdit"></div>                
                <div class="info-inner info-rate"></div>
                <div class="info-inner favourite"></div>
                <div class="info-inner info-description forEdit"></div>
            </div>
        </div>
    </div>

<script src="scripts/index.js"></script> 
<script src="scripts/info.js"></script>
<script src="scripts/delete.js"></script> 
<script src="scripts/enter.js"></script>
</body>
</html>
